<script lang="ts" setup>
import { Ref, onMounted, ref } from "vue";
import { TipsWxVo } from "../../api/tips";
import { goBack } from "../../util/go";
import { baseUrl } from '../../api/http';
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";

const vo:Ref<TipsWxVo> = ref({
	id: 0,
	title: "",
	content: "",
	file: [],
	updateBy: "",
	updateTime: ""
})

const getData = () => {
	uni.getStorage({
		key: "tipsDe",
		success: (data:any) => {
			vo.value = data.data
			console.log(vo.value)
		}
	})
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))

getData()
</script>


<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <uni-icons type="back" size="24" color="#333" @click="goBack"></uni-icons>
      </view>
      <view class="nav-title">详细内容</view>
      <view class="nav-right">

      </view>
    </view>
    <!-- 内容区 -->
    <scroll-view scroll-y class="content-scroll">
      <view class="content-wrapper">
        <!-- 作者信息 -->
        <view class="author-info">
          <view class="author-left">
            <view class="author-icon">
              <uni-icons
                type="camera-filled"
                size="24"
                color="#9370DB"
              ></uni-icons>
            </view>
            <view class="author-name">拍照小贴士</view>
          </view>
          <view class="publish-info">
            <text class="publish-date">{{vo.updateTime}} 拍摄小贴士</text>
            <view class="collect-btn">收藏本文</view>
          </view>
        </view>
        <!-- 文章标题 -->
        <view class="article-title">{{vo.title}}</view>
        <!-- 文章内容 -->
        <view class="article-content">
          <!-- 第一部分 -->
          <view class="content-section">

            <view class="section-content">
              <text class="section-paragraph"
                >{{vo.content}}。</text
              >
            </view>
          </view>
          
          <!-- 图片展示区 -->
          <view class="images-section">
            <view class="section-image-container" v-for="i in vo.file">
              <image
                class="section-image"
                :src="baseUrl + i.url"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

  </view>
</template>

<style>

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 90rpx;
  background-color: #f5f5f5;
}
/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}
.nav-right {
  display: flex;
  align-items: center;
}
.mr-20 {
  margin-right: 20rpx;
}
/* 内容区样式 */
.content-scroll {
  flex: 1;
  overflow: auto;
}
.content-wrapper {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 30rpx;
}
/* 作者信息样式 */
.author-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
}
.author-left {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.author-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f8f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}
.author-name {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.publish-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.publish-date {
  font-size: 12px;
  color: #999999;
}
.collect-btn {
  font-size: 12px;
  color: #999999;
  background-color: #f5f5f5;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
}
/* 文章标题样式 */
.article-title {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 40rpx;
}
/* 文章内容样式 */
.content-section {
  margin-bottom: 50rpx;
}
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-number {
  width: 40rpx;
  height: 40rpx;
  background-color: #2196f3;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin-right: 16rpx;
}
.section-text {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.section-content {
  padding-left: 56rpx;
}
.section-paragraph {
  font-size: 14px;
  color: #666666;
  line-height: 48rpx;
  margin-bottom: 20rpx;
  display: block;
}
.section-image-container {
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  width: 650rpx;
  height: 850rpx;
/*  overflow: hidden; */
}
.section-image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}
.images-section {
  margin-top: 40rpx;
}
/* 底部操作栏样式 */
.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  padding: 0 30rpx;
  flex-shrink: 0;
}
.bottom-left {
  display: flex;
  align-items: center;
}
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 60rpx;
}
.action-text {
  font-size: 12px;
  color: #666666;
  margin-top: 6rpx;
}
.consult-btn {
  background-color: #7fbf9f;
  height: 70rpx;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60rpx;
}
.consult-text {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}
.cursor-pointer {
  cursor: pointer;
}
</style>
